<template>
    <div>
        <!-- <div class="box2"></div> -->
        <!-- 首页轮播图  -->
        <div class="backdrop">
            <div class="rightullidiv ">
                <img class="rightulliimg"
                    src="https://yanxuan.nosdn.127.net/static-union/16653843234a47a0.png?type=webp&imageView&quality=95&thumbnail=1920x420"
                    alt="">
            </div>
        </div>

        <!-- 首页新品发布 -->
        <div class="Second">
            <!-- 版心 -->
            <div class="Center w">
                <!-- 新品发布盒子 -->
                <div class="products">
                    <!-- 左边 -->
                    <div class="Left">
                        <a href="#">
                            <h1>新品发布</h1>
                        </a>
                        <span>为你寻觅世间好物</span>
                    </div>
                    <!-- 右边 -->
                    <div class="right"> <a href="#">更多新品 ></a></div>
                </div>
                <!-- 图片渲染组件 -->
                <Products class="assembly" />
            </div>
            <!-- 左边导航栏 -->
            <LeftNavigation class="leftElevator" />
            <!-- 右边导航栏 -->
            <RightNavigation class="rightElevator" />
        </div>

        <!-- 首页人气推荐 -->

        <div class="popularity">
            <!-- 版心 -->
            <div class="Center w">
                <!-- 人气推荐盒子 -->
                <div class="popularitybox">
                    <!-- 左边 -->
                    <div class="Left">
                        <a href="#" class="">
                            <h1>人气推荐</h1>
                        </a>
                        <a href="#" class=" edit">
                            编辑推荐
                        </a>
                        <a href="#" class="sale">
                            热销总榜
                        </a>

                    </div>
                    <!-- 右边 -->
                    <div class="right"> <a href="#">更多推荐 ></a></div>
                </div>
                <!-- 渲染内容图片组件 -->
                <Popularity />
            </div>

        </div>

        <!-- 服饰鞋包 -->
        <div class="shoes">
            <div class="Center w">
                <!-- 人气推荐盒子 -->
                <div class="shoesbox">
                    <!-- 左边 -->
                    <div class="Left">
                        <a href="#" class="class">
                            <h1>服饰鞋包</h1>
                        </a>
                    </div>
                    <!-- 右边 -->
                    <div class="right">
                        <a href="#">
                            人气推荐 /
                        </a>
                        <a href="#">
                            爆品推荐 /
                        </a>
                        <a href="#">
                            T恤 /
                        </a>
                        <a href="#">
                            童装 /
                        </a>
                        <a href="#">
                            木串把件 /
                        </a>
                        <a href="#">
                            人气推荐 /
                        </a>
                        <a href="#">
                            鞋子 /
                        </a>
                        <a href="#" class="more">查看更多 ></a>
                    </div>
                </div>
                <!-- 渲染内容图片 -->
                <!-- 组件 -->
                <Life />



            </div>
        </div>
        <!-- 底部服务区域 -->
        <div>
            <!-- 组件 -->
            <Customerservice />
        </div>

    </div>
</template>

<script setup>
import LeftNavigation from '@/components/Navigation/LeftNavigation.vue'
import RightNavigation from '@/components/Navigation/rigth.vue'
import Products from '@/components/imgbox/products.vue'
import Popularity from '@/components/imgbox/popularity.vue'
import Life from '@/components/imgbox/life.vue'
import Customerservice from '@/components/bottombox/customerservice.vue'



</script>

<style lang="less" scoped>
// @import url('../../assets/styles/variables.less');
// .box2{
//     width: 100px;
//     height: 100px;
//     background-color: @xtxColor;
// }

.backdrop {
    background-color: #f5f5f5;
}

// 轮播图
.rightullidiv {
    width: 100%;
    /*background: #f2f2f2;*/
    display: flex;
    justify-content: center;
    align-items: center;

    .rightulliimg {
        max-width: 100%;
        max-height: 700px;
    }
}

// 新品发布
.Second {
    height: 510px;
    position: relative;

    // 新品发布 左右两边
    .products {
        padding-top: 15px;
        display: flex;
        justify-content: space-between;

        a:hover {
            color: @xtxColor;

        }

        .Left {
            display: flex;

            span {
                padding-top: 15px;
                margin-left: 15px;
            }
        }

        .right {
            margin-top: 15px;
        }
    }

    .assembly {
        margin-top: 20px;
    }

    // // 电梯导航
    // 左边
    .leftElevator {
        position: absolute;
        bottom: 35%;
    }

    // 右边
    .rightElevator {
        bottom: 35%;
        position: absolute;
        left: 90%;
    }

    // .Navigation {
    //     position: absolute;
    //     bottom: 35%;

    //     ul {
    //         width: 110px;
    //         border: 1px solid #e2ded6;
    //         text-align: center;
    //         // background: #fff;
    //         // left: 50%;
    //         // z-index: 98;
    //         // border-radius: 4px;
    //         // overflow: hidden;
    //         // display: blick;
    //         // opacity: 1;
    //         // will-change: transform;
    //         // transform: translateZ(0);

    //         li {
    //             width: 108px;
    //             height: 36px;
    //             line-height: 36px;

    //             span {
    //                 // vertical-align: middle;
    //                 // display: table-cell;
    //                 // line-height: 14px;
    //                 // font-size: 12px;
    //                 // padding-left: 36px;
    //                 padding: 1px 11px 0px;
    //             }
    //         }
    //     }
    // }
}

//人气推荐
.popularity {
    position: relative;
    background-color: #f4f0ea;

    .Center {
        height: 738px;
    }

    .popularitybox {
        padding-top: 15px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;

        .class:hover {
            color: @xtxColor;
        }

        a:hover {
            color: @xtxColor;

        }

        .Left {
            display: flex;
            justify-content: space-between;

            a {
                padding-top: 15px;
                margin-left: 15px;
            }

            .edit {
                padding-top: 30px;
                padding-left: 30px;

            }



            .sale {
                padding-top: 30px;
                padding-left: 30px;

            }

        }

        .right {
            margin-top: 30px;
        }
    }
}

// 服饰鞋包
.shoes {
    height: 830px;
    position: relative;

    .shoesbox {
        padding-top: 15px;
        display: flex;
        justify-content: space-between;

        a:hover {
            color: @xtxColor;

        }

        .Left {
            display: flex;



            a {
                padding-top: 15px;
                margin-left: 15px;
            }

            .edit {
                padding-top: 30px;
                padding-left: 30px;

            }



            .sale {
                padding-top: 30px;
                padding-left: 30px;

            }

        }

        .right {
            margin-top: 30px;

            .more {
                padding-left: 30px;
            }
        }

    }
}
</style>
